<template>
	<el-form ref="form" :model="saveForm" label-width="80px">
	  <el-form-item label="姓名">
	    <el-input v-model="saveForm.name"></el-input>
	  </el-form-item>
	  <el-form-item label="姓名">
		  <el-upload
			name="file"
			class="avatar-uploader"
			action="http://localhost:8100/student/upload"
			:show-file-list="false"
			:on-success="handleAvatarSuccess"
			:before-upload="beforeAvatarUpload">
			<img v-if="saveForm.imageUrl" :src="'http://localhost:8100/'+saveForm.imageUrl" class="avatar">
			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
		  </el-upload>
	  </el-form-item>
	  
	  <el-form-item label="班级">
	    <el-select v-model="saveForm.classesId" placeholder="请选择班级">
	      <el-option :label="classes.name" :value="classes.id" v-for="classes in classesList"></el-option>
	    </el-select>
	  </el-form-item>
	  <el-form-item label="地区">
		 <el-select v-model="saveForm.proviceId" @change="changeCity" placeholder="请选择省">
		  <el-option
			v-for="item in proviceList"
			:key="item.id"
			:label="item.name"
			:value="item.id">
		  </el-option>
		</el-select>
		<el-select v-model="saveForm.cityId"  @change="changeArea" placeholder="请选择市">
		  <el-option
			v-for="item in cityList"
			:key="item.id"
			:label="item.name"
			:value="item.id">
		  </el-option>
		</el-select>
		<el-select v-model="saveForm.areaId" placeholder="请选择区">
		  <el-option
			v-for="item in areaList"
			:key="item.id"
			:label="item.name"
			:value="item.id">
		  </el-option>
		</el-select>
	  </el-form-item>
	  <el-form-item>
	    <el-button type="primary" @click="onSubmit">保存</el-button>
	    <el-button>取消</el-button>
	  </el-form-item>
	</el-form>
</template>

<script>
	 export default {
	    data() {
	      return {
	        saveForm: {
				areaId:""
			},
			classesList:[],
			proviceList:[],
			cityList:[],
			areaList:[]
	      }
	    },
	    methods: {
		  handleAvatarSuccess(res, file) {
			  console.log(res,file);
		      // this.imageUrl = URL.createObjectURL(file.raw);
			  this.saveForm.imageUrl = res.fileName;
		  },
		  beforeAvatarUpload(file) {
			  return true;
		  },
	      onSubmit() {
			let self = this;
	        this.axios.post("http://localhost:8100/student/addStudent",this.saveForm).then(function(res){
				console.log(res);
				self.$router.push("/")
			})
	      },
		  changeCity(){
			  let self = this;
			  let pid = this.saveForm.proviceId;
			  this.axios.get("http://localhost:8100/student/getAreaListByPid",{params:{pid:pid}})
			  .then(function(res){
			  	console.log("res:",res);
			  	self.cityList = res.data;
				self.saveForm.cityId="";
				self.saveForm.areaId="";
			  });
		  },
		  changeArea(){
			   let self = this;
			  let pid = this.saveForm.cityId;
			  this.axios.get("http://localhost:8100/student/getAreaListByPid",{params:{pid:pid}})
			  .then(function(res){
			  	console.log("res:",res);
			  	self.areaList = res.data;
			  });
		  }  
	    },
		created(){
			let params = this.$route.params;
			console.log(params);
			/* 所有的班级列表 */
			let self = this;
			this.axios.get("http://localhost:8100/student/getClassesAll",{})
			.then(function(res){
				console.log("res:",res);
				self.classesList = res.data;
			});
			/* 省的数据 */
			this.axios.get("http://localhost:8100/student/getAreaListByPid",{params:{pid:1}})
			.then(function(res){
				console.log("res:",res);
				self.proviceList = res.data;
			});
			/* 如果id大于0是修改操作 */
			if(params.id>0){
				// this.saveForm.name="111";
				this.axios.get("http://localhost:8100/student/getById",{params:{id:params.id}})
				.then(function(res){
					console.log("res:",res);
					self.cityList = res.data.cityList;
					self.areaList = res.data.areaList;
					self.saveForm = res.data;
				})
		     }
	  }
}
</script>

<style>
	.avatar-uploader .el-upload {
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
	  }
	  .avatar-uploader .el-upload:hover {
	    border-color: #409EFF;
	  }
	  .avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 178px;
	    height: 178px;
	    line-height: 178px;
	    text-align: center;
	  }
	  .avatar {
	    width: 178px;
	    height: 178px;
	    display: block;
	  }
</style>
